<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus &amp; toolbars</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK#, menus, toolbars, Visual Basic, programming, Linux">
<meta name="description" content="Menus &amp; toolbars">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars</h1>

<p>
In this part of the Visual Basic GTK# programming tutorial, we will 
work with menus &amp; toolbars.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
A <b>menubar</b> is one of the most common parts of the GUI 
application. It is a group of commands located in various menus.
While in console applications you have to remember all those arcane commands, 
here we have most of the commands grouped into logical parts. These are accepted standards 
that further reduce the amount of time spending to learn a new application. 
</p>


<h2>Simple menu</h2>

<p>
In our first example, we will create a menubar with one file menu. 
The menu will have only one menu item. By selecting the item the application quits. 
</p>


<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program shows a simple
' menu. It has one action, which
' will terminate the program, when
' selected. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk


Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Simple menu")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 200)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
    
        Dim mb As New MenuBar

        Dim filemenu As New Menu
        Dim fileItem As New MenuItem("File")
        fileItem.Submenu = filemenu
       
        Dim exitItem As New MenuItem("Exit")
        AddHandler exitItem.Activated, AddressOf Me.OnActivated
        filemenu.Append(exitItem)

        mb.Append(fileItem)

        Dim vbox As New VBox(False, 2)
        vbox.PackStart(mb, False, False, 0)

        Me.Add(vbox)

    End Sub
    
    Sub OnActivated(ByVal sender As Object, _ 
            ByVal args As EventArgs)
        Application.Quit
    End Sub
   
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
This is a small example with minimal menubar functionality.
</p>

<pre class="explanation">
 Dim mb As New MenuBar
</pre>

<p>
<b class="keyword">MenuBar</b> widget is created. This is a container
for the menus. 
</p>

<pre class="explanation">
 Dim filemenu As New Menu
 Dim fileItem As New MenuItem("File")
 fileItem.Submenu = filemenu
</pre>

<p>
Toplevel <b class="keyword">MenuItem</b> is created. 
</p>

<pre class="explanation">
 Dim exitItem As New MenuItem("Exit")
 AddHandler exitItem.Activated, AddressOf Me.OnActivated
 filemenu.Append(exitItem)
</pre>

<p>
Exit <b class="keyword">MenuItem</b> is created and appended to the
File <b class="keyword">MenuItem</b>.
</p>

<pre class="explanation">
 mb.Append(fileItem)
</pre>

<p>
Toplevel <b class="keyword">MenuItem</b> is appended to the <b class="keyword">MenuBar</b>
widget. 
</p>

<pre class="explanation">
 Dim vbox As New VBox(False, 2)
 vbox.PackStart(mb, False, False, 0)
</pre>

<p>
Unlike in other toolkits, we have to take care of the layout management of the menubar
ourselves. We put the menubar into the vertical box. 
</p>


<br>
<img src="/img/gui/vbgtk/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>
<br>


<h2>Submenu</h2>

<p>
Our final example demonstrates how to create a submenu in GTK#. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program creates a submenu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk


Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Submenu")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 200)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll    
        
    End Sub
    
    Private Sub InitUI
    
        Dim mb As New MenuBar

        Dim filemenu As New Menu
        Dim ifile As New MenuItem("File")
        ifile.Submenu = filemenu

        // submenu creation
        Dim imenu As New Menu

        Dim iimport As New MenuItem("Import")
        iimport.Submenu = imenu

        Dim inews As New MenuItem("Import news feed...")
        Dim ibookmarks As New MenuItem("Import bookmarks...")
        Dim imail As New MenuItem("Import mail...")

        imenu.Append(inews)
        imenu.Append(ibookmarks)
        imenu.Append(imail)

        // exit menu item
        Dim iexit As New MenuItem("Exit")
        AddHandler iexit.Activated, AddressOf Me.OnActivated

        filemenu.Append(iimport)
        filemenu.Append(iexit)
        mb.Append(ifile)

        Dim vbox As New VBox(False, 2)
        vbox.PackStart(mb, False, False, 0)
        
        Me.Add(vbox)

    End Sub
    
    Sub OnActivated(ByVal sender As Object, _
            ByVal args As EventArgs)
        Application.Quit
    End Sub
   
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
Submenu creation. 
</p>

<pre class="explanation">
 Dim imenu As New Menu
</pre>

<p>
A submenu is a <b class="keyword">Menu</b>. 
</p>

<pre class="explanation">
 Dim iimport As New MenuItem("Import")
 iimport.Submenu = imenu
</pre>

<p>
It is a submenu of a menu item, which belogs to toplevel
file menu. 
</p>

<pre class="explanation">
 Dim inews As New MenuItem("Import news feed...")
 Dim ibookmarks As New MenuItem("Import bookmarks...")
 Dim imail As New MenuItem("Import mail...")

 imenu.Append(inews)
 imenu.Append(ibookmarks)
 imenu.Append(imail)
</pre>

<p>
Submenu has its own menu items. 
</p>


<br>
<img src="/img/gui/vbgtk/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>
<br>


<h2>Image menu</h2>

<p>
In the next example, we will further explore the menus.
We will add images and accelerators to our menu items. 
<b>Accelerators</b> are keyboard shortcuts for activating a menu item. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program shows image
' menu items, a shorcut and a separator
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Image menu")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 200)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
    
        Dim mb As New MenuBar

        Dim filemenu As New Menu
        Dim ifile As New MenuItem("File")
        ifile.Submenu = filemenu
       
        Dim agr As New AccelGroup
        Me.AddAccelGroup(agr)

        Dim inew As New ImageMenuItem("gtk-new", agr)
        filemenu.Append(inew)
        
        Dim iopen As New ImageMenuItem(Stock.Open, agr)
        filemenu.Append(iopen)

        Dim isep As New SeparatorMenuItem
        filemenu.Append(isep)

        Dim iexit As New ImageMenuItem(Stock.Quit, agr)
        AddHandler iexit.Activated, AddressOf Me.OnActivated
        filemenu.Append(iexit)

        mb.Append(ifile)

        Dim vbox As New VBox(False, 2)
        vbox.PackStart(mb, False, False, 0)
               
        Me.Add(vbox)

    End Sub
    
    Sub OnActivated(ByVal sender As Object, _
            ByVal args As EventArgs)
        Application.Quit
    End Sub
   
    Sub OnDelete(ByVal sender As Object, _ 
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
Our example shows a toplevel menu item with three sublevel menu items. Each of the
menu items has a image and an accelerator. The accelerator for the quit menu item
is active. 
</p>

<pre class="explanation">
 Dim agr As New AccelGroup
 Me.AddAccelGroup(agr)
</pre>

<p>
To work with accelerators, we create a global <b class="keyword">AccelGroup</b>
object. It will be used later.  
</p>

<pre class="explanation">
 Dim inew As New ImageMenuItem("gtk-new", agr)
 filemenu.Append(inew)
</pre>

<p>
<b class="keyword">ImageMenuItem</b> is created. The image comes from the stock
of images. There is a bug in the GTK#. The Stock.New clashes with the Visual Basic New
keyword. 
</p>

<pre class="explanation">
 Dim isep As New SeparatorMenuItem
 filemenu.Append(isep)
</pre>

<p>
These lines create a separator. It is used to put menu items
into logical groups. 
</p>


<br>
<img src="/img/gui/vbgtk/imagemenu.png" alt="Image menu">
<div class="figure">Figure: Image menu</div>
<br>

<p>
Menus group commands that we can use in application. 
Toolbars provide a quick access to the most frequently used commands. 
</p>


<h2>Simple toolbar</h2>

<p>
Next we create a simple toolbar. 
</p>


<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program creates a 
' toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk

 
Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Toolbar")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 200)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
    
        Dim toolbar As New Toolbar
        toolbar.ToolbarStyle = ToolbarStyle.Icons

        Dim newtb As New ToolButton("gtk-new")
        Dim opentb As New ToolButton(Stock.Open)
        Dim savetb As New ToolButton(Stock.Save)
        Dim sep As New SeparatorToolItem
        Dim quittb As New ToolButton(Stock.Quit)

        toolbar.Insert(newtb, 0)
        toolbar.Insert(opentb, 1)
        toolbar.Insert(savetb, 2)
        toolbar.Insert(sep, 3)
        toolbar.Insert(quittb, 4)

        AddHandler quittb.Clicked, AddressOf Me.OnClicked
         
        Dim vbox As New VBox(False, 2)
        vbox.PackStart(toolbar, False, False, 0)

        Me.Add(vbox)

    End Sub
    
    Sub OnClicked(ByVal sender As Object, _
            ByVal args As EventArgs)
        Application.Quit
    End Sub
   
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
The example shows a toolbar and four tool buttons. 
</p>

<pre class="explanation">
 Dim toolbar As New Toolbar
</pre>

<p>
A <b class="keyword">Toolbar</b> widget is created. 
</p>

<pre class="explanation">
 toolbar.ToolbarStyle = ToolbarStyle.Icons
</pre>

<p>
On toolbar, we show only icons. No text. 
</p>

<pre class="explanation">
 Dim opentb As New ToolButton(Stock.Open)
</pre>

<p>
A <b class="keyword">ToolButton</b> with an image from
stock is created. 
</p>

<pre class="explanation">
 Dim sep As New SeparatorToolItem 
</pre>

<p>
This is a separator. It can be used to put toolbar buttons
into logical groups. 
</p>

<pre class="explanation">
 toolbar.Insert(newtb, 0)
 toolbar.Insert(opentb, 1)
 ...
</pre>

<p>
Toolbar buttons are inserted into the toolbar widget. 
</p>

<br>
<img src="/img/gui/vbgtk/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<h2>Undo redo</h2>

<p>
The following example demonstrates, how we can deactivate toolbar buttons on the toolbar.
It is a common practise in GUI programming. For example the save button.
If we save all changes of our document to the disk, the save button is deactivated 
in most text editors. This way the application indicates to the user, 
that all changes are already saved. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program disables/enables
' toolbuttons on a toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Private Dim clicks As Integer = 2
    Private Dim undo As ToolButton
    Private Dim redo As ToolButton
 
    Public Sub New
        
        MyBase.New("Undo redo")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 200)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
    
        Dim toolbar As New Toolbar
        toolbar.ToolbarStyle = ToolbarStyle.Icons

        undo = New ToolButton(Stock.Undo)
        undo.Label = "Undo"
        redo = New ToolButton(Stock.Redo)
        redo.Label = "Redo"
        
        Dim sep As New SeparatorToolItem
        Dim quit As New ToolButton(Stock.Quit)

        toolbar.Insert(undo, 0)
        toolbar.Insert(redo, 1)
        toolbar.Insert(sep, 2)
        toolbar.Insert(quit, 3)

        AddHandler undo.Clicked, AddressOf Me.OnCount
        AddHandler redo.Clicked, AddressOf Me.OnCount
        AddHandler quit.Clicked, AddressOf Me.OnClicked
         
        Dim vbox As New VBox(False, 2)
        vbox.PackStart(toolbar, False, False, 0)

        Me.Add(vbox)

    End Sub
    
    Private Sub OnCount(ByVal sender As Object, _
            ByVal args As EventArgs)
        
        If "Undo".Equals(sender.Label)
            clicks += 1
        Else 
            clicks -= 1
        End If
  
        If clicks <= 0 
            undo.Sensitive = True
            redo.Sensitive = False
        End If

        If clicks >= 5 
            undo.Sensitive = False
            redo.Sensitive = True
        End If
       
    End Sub
    
    Sub OnClicked(ByVal sender As Object, _
            ByVal args As EventArgs)
        Application.Quit
    End Sub
   
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
Our example creates undo and redo buttons from the GTK# stock resources. 
After several clicks each of the buttons is deactivated. The buttons are grayed out.  
</p>

<pre class="explanation">
 Private Dim clicks As Integer = 2
</pre>

<p>
The <b class="keyword">clicks</b> variable decides, which button is activated or
deactivated. 
</p>


<pre class="explanation">
 undo = New ToolButton(Stock.Undo)
 undo.Label = "Undo"
 redo = New ToolButton(Stock.Redo)
 redo.Label = "Redo"
</pre>

<p>
We have two tool buttons. Undo and redo tool buttons. Images come from the stock
resources. 
</p>

<pre class="explanation">
 AddHandler undo.Clicked, AddressOf Me.OnCount
 AddHandler redo.Clicked, AddressOf Me.OnCount
</pre>

<p>
We plug a method for the <b class="keyword">Clicked</b> event for both tool buttons. 
</p>

<pre class="explanation">
 If clicks <= 0 
     undo.Sensitive = True
     redo.Sensitive = False
 End If
</pre>

<p>
To activate a widget, we set its <b class="keyword">Sensitive</b> property
to true. To deactivate it, we set it to false. 
</p>


<br>
<img src="/img/gui/vbgtk/undoredo.png" alt="Undo redo">
<div class="figure">Figure: Undo redo</div>
<br>

<hr class="btm">

<p>
In this chapter of the Visual Basic GTK# tutorial, we showed, how to work 
with menus &amp; toolbars.
</p>


<br> 
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 25, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

